<template>
  <j-modal
    title="选择任务"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    @update:fullscreen="isFullscreen"
    wrapClassName="j-depart-select-modal"
    switchFullscreen
    cancelText="关闭"
  >
    <a-spin tip="Loading..." :spinning="false" v-if="mockData.length > 0">
      <a-transfer
        :data-source="mockData"
        show-search
        :list-style="{ width: '250px', height: '300px' }"
        :titles="['填报任务', '已选任务']"
        :operations="['选择', '取消']"
        :target-keys="targetKeys"
        :render="(item) => `${item.taskName}`"
        @change="handleChange"
      >
        <span slot="notFoundContent">没数据</span>
      </a-transfer>
    </a-spin>
  </j-modal>
</template>

<script>
import { queryDepartTreeList, auditedTaskList } from "@/api/api";
export default {
  name: "JSelectTaskModal",
  props: [
    "modalWidth",
    "multi",
    "rootOpened",
    "departId",
    "store",
    "text",
    "treeOpera",
  ],
  data() {
    return {
      mockData: [],
      targetKeys: [],
      visible: false,
      confirmLoading: false,
      treeData: [],
      autoExpandParent: true,
      expandedKeys: [],
      dataList: [],
      checkedKeys: [],
      checkedRows: [],
      searchValue: "",
      checkStrictly: true,
      fullscreen: false,
    };
  },
  created() {
    // this.loadDepart();
    this.getAuditedTaskList();
  },
  watch: {
    departId() {
      this.initDepartComponent();
    },
    visible: {
      handler() {
        this.initDepartComponent(true);
      },
    },
  },
  computed: {
    treeScreenClass() {
      return {
        "my-dept-select-tree": true,
        fullscreen: this.fullscreen,
      };
    },
    filterTreeData() {
      if (!this.searchValue) {
        return this.treeData;
      }
      let filter = [];
      this.dataList.forEach((item) => {
        if (item.title.includes(this.searchValue)) {
          filter.push(
            Object.assign({}, item, { children: null, isLeaf: true })
          );
        }
      });
      return filter;
    },
  },
  methods: {
    //获取数据
    getAuditedTaskList() {
      const mockData = [];
      const targetKeys = [];
      auditedTaskList().then((res) => {
        var len = res.result.length;
        for (let i = 0; i < len; i++) {
          const data = {
            key: `${res.result[i].id}`,
            title: `${res.result[i].id}`,
            description: `${res.result[i].description}`,
            taskName: `${res.result[i].taskName}`,
          };
          mockData.push(data);
        }

        this.mockData = mockData;
        //   console.log(this.mockData);
      });
    },
    handleChange(targetKeys, direction, moveKeys) {
      //   console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },
    show() {
      this.visible = true;
      this.checkedRows = [];
      this.checkedKeys = [];
    },
    initDepartComponent(flag) {
      let arr = [];
      //该方法两个地方用 1.visible改变事件重新设置选中项 2.组件编辑页面回显
      let fieldName = flag == true ? "key" : this.text;
      if (this.departId) {
        let arr2 = this.departId.split(",");
        for (let item of this.dataList) {
          if (arr2.indexOf(item[this.store]) >= 0) {
            arr.push(item[fieldName]);
          }
        }
      }
      if (flag == true) {
        this.checkedKeys = [...arr];
      } else {
        this.$emit("initComp", arr.join(","));
      }
    },
    reWriterWithSlot(arr) {
      for (let item of arr) {
        if (item.children && item.children.length > 0) {
          this.reWriterWithSlot(item.children);
          let temp = Object.assign({}, item);
          temp.children = {};
          this.dataList.push(temp);
        } else {
          this.dataList.push(item);
          item.scopedSlots = { title: "title" };
        }
      }
    },
    initExpandedKeys(arr) {
      if (arr && arr.length > 0) {
        let keys = [];
        for (let item of arr) {
          if (item.children && item.children.length > 0) {
            keys.push(item.id);
          }
        }
        this.expandedKeys = [...keys];
        //全部keys
        //this.allTreeKeys = [...keys]
      } else {
        this.expandedKeys = [];
        //this.allTreeKeys = []
      }
    },
    onCheck(checkedKeys, info) {
      if (!this.multi) {
        let arr = checkedKeys.checked.filter(
          (item) => this.checkedKeys.indexOf(item) < 0
        );
        this.checkedKeys = [...arr];
        this.checkedRows =
          this.checkedKeys.length === 0 ? [] : [info.node.dataRef];
      } else {
        if (this.checkStrictly) {
          this.checkedKeys = checkedKeys.checked;
        } else {
          this.checkedKeys = checkedKeys;
        }
        this.checkedRows = this.getCheckedRows(this.checkedKeys);
      }
    },
    onSelect(selectedKeys, info) {
      //取消关联的情况下才走onSelect的逻辑
      if (this.checkStrictly) {
        let keys = [];
        keys.push(selectedKeys[0]);
        if (!this.checkedKeys || this.checkedKeys.length === 0 || !this.multi) {
          this.checkedKeys = [...keys];
          this.checkedRows = [info.node.dataRef];
        } else {
          let currKey = info.node.dataRef.key;
          if (this.checkedKeys.indexOf(currKey) >= 0) {
            this.checkedKeys = this.checkedKeys.filter(
              (item) => item !== currKey
            );
          } else {
            this.checkedKeys.push(...keys);
          }
        }
        this.checkedRows = this.getCheckedRows(this.checkedKeys);
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    handleSubmit() {
      //   console.log(this.targetKeys);
      if (!this.targetKeys || this.targetKeys.length == 0) {
        this.$emit("ok", "");
      } else {
        let checkedTask = this.getCheckedTask(this.targetKeys);
        //   console.log(checkedTask);
        let targetKeysStr = this.targetKeys.join(",");
        this.$emit("ok", checkedTask);
      }
      this.handleClear();
    },

    getCheckedTask(checkedKeys) {
      let checkedTask = [];
      checkedKeys.forEach((target, index) => {
        this.mockData.forEach((item) => {
          //   console.log(target, item);
          if (target == item.key) {
            checkedTask.push(item);
          }
        });
      });
      return checkedTask;
    },
    handleCancel() {
      this.handleClear();
    },
    handleClear() {
      this.visible = false;
      this.checkedKeys = [];
    },
    getParentKey(currKey, treeData) {
      let parentKey;
      for (let i = 0; i < treeData.length; i++) {
        const node = treeData[i];
        if (node.children) {
          if (node.children.some((item) => item.key === currKey)) {
            parentKey = node.key;
          } else if (this.getParentKey(currKey, node.children)) {
            parentKey = this.getParentKey(currKey, node.children);
          }
        }
      }
      return parentKey;
    },
    // 根据 checkedKeys 获取 rows
    // getCheckedRows(checkedKeys) {
    //   const forChildren = (list, key) => {
    //     for (let item of list) {
    //       if (item.id === key) {
    //         return item;
    //       }
    //       if (item.children instanceof Array) {
    //         let value = forChildren(item.children, key);
    //         if (value != null) {
    //           return value;
    //         }
    //       }
    //     }
    //     return null;
    //   };

    //   let rows = [];
    //   for (let key of checkedKeys) {
    //     let row = forChildren(this.treeData, key);
    //     if (row != null) {
    //       rows.push(row);
    //     }
    //   }
    //   return rows;
    // },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    isFullscreen(val) {
      this.fullscreen = val;
    },
  },
};
</script>

<style lang="scss" scoped>
// 限制部门选择树高度，避免部门太多时点击确定不便
.my-dept-select-tree {
  height: 350px;

  &.fullscreen {
    height: calc(100vh - 250px);
  }
  overflow-y: scroll;
}
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>